<template>
    <div class="group-avatar-wrap">
        <template v-if="icon">
            <img class="img" :data-src="icon" :key="icon" alt="">
        </template>
        <template v-else>
            <template v-if="avatarList.length == 1">
                <img class="img"  :data-src="avatarList[0].icon" :key="avatarList[0].icon" alt="">
            </template>
            <template v-else-if="avatarList.length == 2">
                <div class="img-two-wrap img-bg">
                    <img class="img-two"  :data-src="avatarList[0].icon" :key="avatarList[0].icon" alt="">
                    <img class="img-two" :data-src="avatarList[1].icon" :key="avatarList[1].icon" alt="">
                </div>
            </template>
            <template v-else-if="avatarList.length == 3">
                <div class="img-three-wrap img-bg">
                    <div class="img-three-first-line">
                        <img class="img-three" :data-src="avatarList[0].icon" :key="avatarList[0].icon" alt="">
                    </div>
                    <div class="img-three-two-line">
                        <img class="img-three" :data-src="avatarList[1].icon" :key="avatarList[1].icon" alt="">
                        <img class="img-three" :data-src="avatarList[2].icon" :key="avatarList[2].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else-if="avatarList.length == 4">
                <div class="img-three-wrap img-bg">
                    <div class="img-four-first-line">
                        <img class="img-three" :data-src="avatarList[0].icon" :key="avatarList[0].icon" alt="">
                        <img class="img-three" :data-src="avatarList[1].icon" :key="avatarList[1].icon" alt="">
                    </div>
                    <div class="img-three-two-line">
                        <img class="img-three" :data-src="avatarList[2].icon" :key="avatarList[2].icon" alt="">
                        <img class="img-three" :data-src="avatarList[3].icon" :key="avatarList[3].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else-if="avatarList.length == 5">
                <div class="img-five-wrap img-bg-tline">
                    <div class="img-five-first-line">
                        <img class="img-five" :data-src="avatarList[0].icon" :key="avatarList[0].icon" alt="">
                        <img class="img-five" :data-src="avatarList[1].icon" :key="avatarList[1].icon" alt="">
                    </div>
                    <div class="img-five-two-line">
                        <img class="img-five" :data-src="avatarList[2].icon" :key="avatarList[2].icon" alt="">
                        <img class="img-five" :data-src="avatarList[3].icon" :key="avatarList[3].icon" alt="">
                        <img class="img-five" :data-src="avatarList[4].icon" :key="avatarList[4].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else-if="avatarList.length == 6">
                <div class="img-five-wrap img-bg-tline">
                    <div class="img-five-first-line">
                        <img class="img-five" :data-src="avatarList[0].icon" :key="avatarList[0].icon" alt="">
                        <img class="img-five" :data-src="avatarList[1].icon" :key="avatarList[1].icon" alt="">
                        <img class="img-five" :data-src="avatarList[2].icon" :key="avatarList[2].icon" alt="">
                    </div>
                    <div class="img-five-two-line">
                        <img class="img-five" :data-src="avatarList[3].icon" :key="avatarList[3].icon" alt="">
                        <img class="img-five" :data-src="avatarList[4].icon" :key="avatarList[4].icon" alt="">
                        <img class="img-five" :data-src="avatarList[5].icon" :key="avatarList[5].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else-if="avatarList.length == 7">
                <div class="img-seven-wrap img-bg-tline">
                    <div class="img-seven-first-line">
                        <img class="img-seven" :data-src="avatarList[0].icon" :key="avatarList[0].icon" alt="">
                    </div>
                    <div class="img-seven-two-line">
                        <img class="img-seven" :data-src="avatarList[1].icon" :key="avatarList[1].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[2].icon" :key="avatarList[2].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[3].icon" :key="avatarList[3].icon" alt="">
                    </div>
                    <div class="img-seven-three-line">
                        <img class="img-seven" :data-src="avatarList[4].icon" :key="avatarList[4].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[5].icon" :key="avatarList[5].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[6].icon" :key="avatarList[6].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else-if="avatarList.length == 8">
                <div class="img-seven-wrap img-bg-tline">
                    <div class="img-seven-first-line">
                        <img class="img-seven" :data-src="avatarList[0].icon" :key="avatarList[0].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[1].icon" :key="avatarList[1].icon" alt="">
                    </div>
                    <div class="img-seven-two-line">
                        <img class="img-seven" :data-src="avatarList[2].icon" :key="avatarList[2].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[3].icon" :key="avatarList[3].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[4].icon" :key="avatarList[4].icon" alt="">
                    </div>
                    <div class="img-seven-three-line">
                        <img class="img-seven" :data-src="avatarList[5].icon" :key="avatarList[5].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[6].icon" :key="avatarList[6].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[7].icon" :key="avatarList[7].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else-if="avatarList.length == 9">
                <div class="img-seven-wrap img-bg-tline">
                    <div class="img-seven-first-line">
                        <img class="img-seven" :data-src="avatarList[0].icon" :key="avatarList[0].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[1].icon" :key="avatarList[1].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[2].icon" :key="avatarList[2].icon" alt="">
                    </div>
                    <div class="img-seven-two-line">
                        <img class="img-seven" :data-src="avatarList[3].icon" :key="avatarList[3].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[4].icon" :key="avatarList[4].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[5].icon" :key="avatarList[5].icon" alt="">
                    </div>
                    <div class="img-seven-three-line">
                        <img class="img-seven" :data-src="avatarList[6].icon" :key="avatarList[6].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[7].icon" :key="avatarList[7].icon" alt="">
                        <img class="img-seven" :data-src="avatarList[8].icon" :key="avatarList[8].icon" alt="">
                    </div>
                </div>
            </template>

            <template v-else>
                <span></span>
                <!--<span>{{avatarList.length}}xxx</span>-->
            </template>
        </template>
    </div>
</template>
<script>
// import defaultIcon from '../../assets/group_icon.png'
export default {
    data() {
        return {
        }
    },
    props: {
        id: {
            type: [Number,String],
            default: 0
        }
    },
    computed: {
        avatarList() {
            let list = []
            let groupList = this.$store.state.base.groupList
            if (groupList && groupList.length > 0) {
                let group = groupList.filter((el) => {
                  return el.id == this.id
                })
                if (group.length > 0) {
                    let nineps = group[0].nineps
                    if (nineps.length > 0) {
                        for (let i = 0; i < nineps.length; i++) {
                            if (!nineps[i].icon) {
                                nineps[i].icon = 'http://mwimg.mostonetech.xyz/img/45d90228f6192c41832d5e87d3125136.jpg'
                                nineps[i].oriIcon = nineps[i].icon
                            } else {
                                if (nineps[i].icon.indexOf('x-oss-process=image/resize,h_40') == -1) {
                                    nineps[i].oriIcon = nineps[i].icon
                                    nineps[i].icon = nineps[i].icon + '?x-oss-process=image/resize,h_40'
                                }
                            }
                        }
                    }
                    return nineps
                }
            }
            return list
        },
        icon() {
            let icon = ''
            let groupList = this.$store.state.base.groupList
            if (groupList && groupList.length > 0) {
                let group = groupList.filter((el)=>{
                    return el.id == this.id
                })
                if (group.length > 0) {
                    return group[0].group_icon
                }
            }
            return icon
        }

    },

    methods: {
    },
    mounted() {
        this.$Lazyload.lazyLoadHandler()
    }
}
</script>
<style lang="less">
    .group-avatar-wrap {
        .img {
            width: 40px;
            height: 40px;
            border-radius: 2px;
            display: block;
            cursor: pointer;
        }
        .img-bg {
            background: #ccc;
            width: 40px;
            height: 40px;
            border-radius: 2px;
            display: block;
            cursor: pointer;
            padding: 2px;
            box-sizing: border-box;
        }
        .img-bg-tline {
            background: #ccc;
            width: 40px;
            height: 40px;
            border-radius: 2px;
            display: block;
            cursor: pointer;
            padding: 1px;
            box-sizing: border-box;
        }
        .img-two-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .img-two {
                width: 17px;
                height: 17px;
            }
        }
        .img-three-wrap {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .img-three-first-line {
                height: 17px;
                display: flex;
                justify-content: center;
            }
            .img-three-two-line {
                height: 17px;
                display: flex;
                justify-content: space-between;
            }
            .img-three {
                width: 17px;
                height: 17px;
            }
            .img-four-first-line {
                height: 17px;
                display: flex;
                justify-content: space-between;
            }

        }
        .img-five-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            .img-five-first-line {
                height: 12px;
                margin-bottom: 1px;
            }
            .img-five-two-line {
                height: 12px;
            }
            .img-five {
                width: 12px;
                height: 12px;
            }
            .img-five + .img-five {
                margin-left: 1px;
            }
        }
        .img-seven-wrap {
            display: flex;
            flex-direction: column;
                .img-seven-first-line {
                    height: 12px;
                    display: flex;
                    margin-bottom: 1px;
                    justify-content: center;
                }
                .img-seven-two-line {
                    height: 12px;
                    display: flex;
                    margin-bottom: 1px;
                }
                .img-seven-three-line {
                    height: 12px;
                    display: flex;
                }
                .img-seven {
                    width: 12px;
                    height: 12px;
                }
                .img-seven + .img-seven {
                    margin-left: 1px;
                }
        }
    }

</style>
